<template>
    <!-- 下载文件 -->
    <div class="yi-download">
        <el-button type="text" v-for="(item) in files" :key="item.id" @click="downloadUrl(item)">
            {{ item.fileOriginalName }};
        </el-button>
    </div>
</template>

<script>
import { downloadFile } from "@/api/system/user.js";
import { errorInfo } from "@/utils/errorInfo";
export default {
    name: "YiDownload",
    props: {
        file: { // 文件列表
            type: Array,
            required: true
        }
    },
    data() {
        return {
            files: [], // 文件列表
            imageSuffix: ["jpg", "png", "gif", "jpeg", 'pdf']
        }
    },
    methods: {
        handleFileName(fileName) {
            let index = fileName.indexOf('_');
            return fileName.slice(index + 1, fileName.length);
        },
        download(data) { // 下载
            if (data && data.fileName) {
                downloadFile({ fileName: data.fileName }).then((res) => {
                    let dataFile = res.data;
                    if (dataFile && dataFile.size > 10) {
                        if (window.navigator.msSaveOrOpenBlob){
                            navigator.msSaveOrOpenBlob(new Blob([dataFile]), `${data.fileOriginalName}`);
                        } else {
                            let blob = new Blob([dataFile]);
                            let a = document.createElement('a');
                            a.href = URL.createObjectURL(blob);
                            a.download = `${data.fileOriginalName}`;
                            a.click();
                            a = null;
                        }
                    } else {
                        errorInfo('下载失败,文件出错');
                    }
                })
            } else {
                errorInfo('下载失败,请稍后重试');
            }
        },
        downloadUrl(data) {
            let suffix = this.suffixSlice(data.fileOriginalName);
            let a = document.createElement('a');
			a.style.display = 'none';
			a.href = data.fileUrl;
			if (!this.imageSuffix.includes(suffix)) a.download = data.fileOriginalName;
            a.target = "_blank";
			document.body.appendChild(a);
			a.click();
			URL.revokeObjectURL(a.href);
			document.body.removeChild(a);
			a = null;
        },
        renderData() {
            if (this.file) {
                const files = this.file.map(item => {
                    return {
                        id: item.id,
                        fileName: item.fileName,
                        fileUrl: item.fileUrl,
                        fileOriginalName: this.handleFileName(item.fileName)
                    }
                })
                this.files.length = 0;
                this.files = files;
            }
        },
        suffixSlice(fileName) { // 文件后缀截取
            let suffixIndex = fileName.lastIndexOf('.');
            let suffixName = fileName.slice(suffixIndex + 1, fileName.length);
            return suffixName;
        }
    },
    watch: {
        file: {
            handler() {
                this.renderData();
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style>
    .yi-download .el-button + .el-button {
        margin-left: 0;
    }
    .yi-download .el-button {
        margin-right: 5px;
    }
    .yi-download .el-button:nth-last-child(1) {
        margin-right: 0;
    }
</style>